import React, { useState, useCallback } from "react";
import { renderRoutes } from "react-router-config";
import { Link } from "react-router-dom";
import { Menu } from "antd";
import { useTranslation } from "react-i18next";
import ModalButton from "@/components/ModalButton";
import style from "./mainPage.module.scss";
import {
  SmileOutlined,
  AppstoreOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";

const MainPage = ({ route }) => {
  const { t } = useTranslation();
  const [current, setCurrent] = useState("jokes");
  const meanStyle = { justifyContent: "center" };
  const handleClick = useCallback(({ key }) => {
    setCurrent(key);
  }, []);
  const openDraw = useCallback(() => {
    React.$setGlobalState({ drawReactMain: true });
  }, []);

  return (
    <div className={style.mainPageContainer}>
      <Menu
        style={meanStyle}
        onClick={handleClick}
        selectedKeys={[current]}
        mode="horizontal"
      >
        <Menu.Item key="jokes" icon={<SmileOutlined spin />}>
          <Link to="/mainPage/jokes">{t("地狱笑话")}</Link>
        </Menu.Item>
        <Menu.Item key="stickyScroll" icon={<ExclamationCircleOutlined />}>
          <Link to="/mainPage/stickyScroll">{t("测试stickyScroll")}</Link>
        </Menu.Item>
        <Menu.Item key="goodsStandards" icon={<ExclamationCircleOutlined />}>
          <Link to="/mainPage/goodsStandards">{t("商品规格")}</Link>
        </Menu.Item>

        <Menu.Item key="testInfoScroll" icon={<ExclamationCircleOutlined />}>
          <Link to="/mainPage/testInfoScroll">{t("上下循环滚动信息")}</Link>
        </Menu.Item>

        {window.__POWERED_BY_QIANKUN__ && (
          <Menu.Item key="app" icon={<AppstoreOutlined />} onClick={openDraw}>
            打开reactMain主应用的draw抽屉
          </Menu.Item>
        )}
        {window.__POWERED_BY_QIANKUN__ && (
          <Menu.Item key="alipay" icon={<ExclamationCircleOutlined />}>
            <ModalButton />
          </Menu.Item>
        )}

        <Menu.Item key="formTableDemo" icon={<ExclamationCircleOutlined />}>
          <Link to="/mainPage/formTableDemo">baseFormTable</Link>
        </Menu.Item>

        <Menu.Item key="scrollToTab" icon={<ExclamationCircleOutlined />}>
          <Link to="/mainPage/scrollToTab">scrollToTab</Link>
        </Menu.Item>

        <Menu.Item key="mapApi" icon={<ExclamationCircleOutlined />}>
          <Link to="/mainPage/mapApi">{t("高德地图api测试")}</Link>
        </Menu.Item>

        <Menu.Item key="canvasGame" icon={<ExclamationCircleOutlined />}>
          <Link to="/mainPage/canvasGame">canvasGame</Link>
        </Menu.Item>
        <Menu.Item key="goMapGame" icon={<ExclamationCircleOutlined />}>
          <Link to="/mainPage/goMapGame">goMapGame</Link>
        </Menu.Item>
        <Menu.Item key="physicsEngine" icon={<ExclamationCircleOutlined />}>
          <Link to="/mainPage/physicsEngine">physicsEngine</Link>
        </Menu.Item>
      </Menu>
      {renderRoutes(route.routes)}
    </div>
  );
};

export default MainPage;
